<template>
  <div class="menu">
    <el-form inline ref="form" :model="formMessage">
      <el-form-item label="角色名称" prop="name">
        <el-input type="text" v-model="formMessage.name" clearable placeholder="请输入菜单名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handleGetData">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleAddMenu">添加角色</el-button>
      </el-form-item>
    </el-form>
    <div class="mt20">
      <el-table :data="tableData" v-loading="loading">
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="name" label="角色名称"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="createdTime" label="添加时间">
          <template slot-scope="scope">
            <span>{{scope.row.createdTime | formatDate}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleAllowMenu(scope.row.id)">分配菜单</el-link>
            <el-link type="primary" class="ml10" @click="handleAllowResource(scope.row.id)">分配资源</el-link>
            <el-link type="primary" class="ml10" @click="handleEdit(scope.row)">编辑</el-link>
            <el-link type="primary" class="ml10" @click="handleDel(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="mt20">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formMessage.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="formMessage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="dataTotal">
      </el-pagination>
    </div>

    <role-add-update
      :show="showAddUpdateDialog"
      :is-edit="isEdit"
      :detail="roleDetail"
      @close="showAddUpdateDialog = false"
      @success="handleSearch" />
  </div>
</template>

<script lang="ts">
import { Form, Message } from 'element-ui'
import { Vue, Component } from 'vue-property-decorator'
import { delRole, getRolePages } from '@/services/boss'
import RoleAddUpdate from './RoleAddUpdate.vue'

@Component({
  components: {
    RoleAddUpdate
  }
})
export default class MenuPage extends Vue {
  private formMessage: any = {
    name: '',
    current: 1,
    size: 10
  }

  private tableData: Array<any> = []
  private loading = false
  private dataTotal = 0
  private showAddUpdateDialog = false
  private roleDetail: any = {}
  private isEdit = false

  handleSearch () {
    this.formMessage.current = 1
    this.handleGetData()
  }

  async handleGetData () {
    try {
      const params = Object.assign({}, this.formMessage)
      this.loading = true
      const { data } = await getRolePages(params)
      this.tableData = data.records
      this.dataTotal = data.total
    } catch (e: any) {
      Message.error(e.message)
    } finally {
      this.loading = false
    }
  }

  handleCurrentChange (page: number) {
    this.formMessage.current = page
    this.handleGetData()
  }

  handleSizeChange (size: number) {
    this.formMessage.current = 1
    this.formMessage.size = size
    this.handleGetData()
  }

  handleReset () {
    (this.$refs.form as Form).resetFields()
    this.handleSearch()
  }

  handleEdit (row: any) {
    this.roleDetail = row
    this.isEdit = true
    this.showAddUpdateDialog = true
  }

  async handleDel (row: any) {
    await this.$confirm(`确认删除${row.name}角色吗？`, '提示', {
      closeOnClickModal: false
    })
    const { id } = row
    try {
      await delRole(id)
      Message.success('删除成功')
      await this.handleGetData()
    } catch (e) {
      console.error(e)
      Message.error('删除失败')
    }
  }

  handleAddMenu () {
    this.roleDetail = {}
    this.isEdit = false
    this.showAddUpdateDialog = true
  }

  handleAllowMenu (id: number) {
    this.$router.push({
      path: `/role/${id}/alloc-menu`
    })
  }

  handleAllowResource (id: number) {
    this.$router.push({
      path: `/role/${id}/alloc-resource`
    })
  }

  mounted () {
    this.handleSearch()
  }
}
</script>

<style scoped>

</style>
